<template>
  <div>
    <el-form :model="formData" label-width="90px" :rules="FormRules" ref="addForm">
      <el-form-item label="公司名称" prop="companyId">
        <el-select v-model="formData.companyId" placeholder="请选择" @change="getDepartment">
          <el-option
            v-for="item in companyList"
            :key="item.companyId"
            :label="item.companyName"
            :value="item.companyId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门名称" prop="departmentId">
        <el-select v-model="formData.departmentId" placeholder="请选择">
          <el-option
            v-for="item in department_list"
            :key="item.departmentId"
            :label="item.departmentName"
            :value="item.departmentId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="员工姓名" prop="staffName">
        <el-input v-model="formData.staffName" placeholder="请输入员工姓名" maxlength="10" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="员工电话" prop="staffPhone">
        <el-input v-model="formData.staffPhone" placeholder="请输入员工电话" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="员工邮箱" prop="staffEmail">
        <el-input
          v-model="formData.staffEmail"
          placeholder="请输入员工邮箱"
          maxlength="10"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="员工性别" prop="staffSex">
        <el-radio-group v-model="formData.staffSex">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="员工生日" prop="staffBirthday">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="formData.staffBirthday"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="岗位名称" prop="postName">
        <el-input v-model="formData.postName" placeholder="请输入岗位名称"></el-input>
      </el-form-item>
      <el-form-item label="离职状态" prop="quitStatus">
        <el-radio-group v-model="formData.quitStatus">
          <el-radio label="1">在职</el-radio>
          <el-radio label="0">离职</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="员工描述" prop="description">
        <el-input
          v-model="formData.description"
          placeholder="请输入员工描述"
          maxlength="50"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input type="number" v-model="formData.sort" placeholder="请输入员工排序的数字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handSave()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { staffAdd, staffEdit, departmentList } from "../../../api/baseSetting";
export default {
  data() {
    var checkSort = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入排序"));
      }
      if (!Number.isInteger(value * 1)) {
        callback(new Error("请输入数字值"));
      } else {
        callback();
      }
    };
    return {
      formData: {
        staffId: "",
        companyId: "",
        departmentId: "",
        staffName: "",
        staffPhone: "",
        staffEmail: "",
        staffSex: "",
        staffBirthday: "",
        postName: "",
        quitStatus: "",
        description: "",
        sort: ""
      },
      companyList: [], //公司列表
      department_list: [], //部门列表
      FormRules: {
        companyId: [{ required: true, message: "请选择公司", trigger: "blur" }],
        departmentId: [
          { required: true, message: "请选择部门", trigger: "blur" }
        ],
        staffName: [
          { required: true, message: "请填写员工姓名", trigger: "blur" }
        ],
        staffPhone: [
          { required: true, message: "请填写员工电话", trigger: "blur" }
        ],
        staffSex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        postName: [
          { required: true, message: "请输入岗位名称", trigger: "blur" }
        ],
        quitStatus: [
          { required: true, message: "请选择离职转态", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入员工描述", trigger: "blur" },
          { max: 50, message: "长度小于50 个字符", trigger: "blur" }
        ],
        sort: [{ required: true, validator: checkSort, trigger: "blur" }]
      }
    };
  },
  props: {
    sendFormData: {
      num: {
        type: Object
      }
    }
  },
  methods: {
    //点击保存
    handSave() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.formData.staffId) {
            //编辑
            staffEdit(this.formData).then(res => {
              this.$message({
                message: "成功",
                type: "success"
              });
              this.$emit("hideTotas");
            });
          } else {
            //新增
            staffAdd(this.formData).then(res => {
              this.$message({
                message: "成功",
                type: "success"
              });
              this.$emit("hideTotas");
            });
          }
        }
      });
    },
    //获取公司列表
    getCompany() {
      this.$store.dispatch("getCompany").then(res => {
        this.companyList = res;
      });
    },
    //获取部门列表
    getDepartment(companyId) {
      console.log(companyId);
      let para = {
        companyId,
        page: {
          page: this.page,
          pageSize: 1000
        }
      };
      departmentList(para).then(res => {
        this.department_list = res.records;
      });
    },
    //页面初始化
    init() {
      if (this.sendFormData.staffId) {
        this.formData = {
          staffId: this.sendFormData.staffId,
          companyId: this.sendFormData.companyId,
          departmentId: this.sendFormData.departmentId,
          staffName: this.sendFormData.staffName,
          staffPhone: this.sendFormData.staffPhone,
          staffEmail: this.sendFormData.staffEmail,
          staffSex: this.sendFormData.staffSex.toString(),
          staffBirthday: this.sendFormData.staffBirthday,
          postName: this.sendFormData.postName,
          quitStatus: this.sendFormData.quitStatus.toString(),
          description: this.sendFormData.description,
          sort: this.sendFormData.sort
        };
        this.getDepartment(this.sendFormData.companyId)

      }
    }
  },
  mounted() {
    this.init();
    this.getCompany();
  }
};
</script>

<style lang="less" scoped>
</style>
